<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>会员设置</title>
  <script src="../../js/li_ting/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../../js/li_ting/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../js/li_ting/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
  <script src="../../js/li_ting/data.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #box {
      width: 100%;
      height: 100%;
    }

    #top {
      width: 80%;
      position: absolute;
      left: 10%;
      top: 5%;
    }

    #myTable {
      width: 50%;
      position: absolute;
      top: 25%;
      left: 10%;
    }

    tr {
      height: 50px;
    }

    td {
      width: 100px;
      height: 30px;
      line-height: 30px;
    }

    .sp1 {
      color: blue;
    }

    #listData {
      width: 40%;
      position: absolute;
      left: 10%;
      top: 15%;
    }

    #listData input {
      width: 40%;
    }

    #showplace {
      /* width: 40%; */
      position: absolute;
      top: 25%;
      left: 60%;
      font-size: 20px;
    }

    #showplace ul {
      list-style: none;
    }

    #showplace li {
      margin: 10px;
    }

    .changeData {
      color: blueviolet;
    }
  </style>
</head>

<body>
  <!-- <span>页面3:1.添加查找框，2.数据做成3条实现分页，3.添加全选按钮</span> -->
  <div id="box">
    <div id="top">
      <h4>会员设置</h4>
      <hr />
    </div>
    <div class="input-group" id="listData">
      <span class="input-group-addon" id="sizing-addon2">@</span>
      <input type="text" class="form-control" placeholder="输入会员等级名称" aria-describedby="sizing-addon2" id="nameInput" />
      <button type="button" class="btn btn-primary" id="searchBtn">搜索</button>
    </div>
    <div id="showplace">
      <!-- 展示 -->
    </div>
    <table id="myTable">
      <tr>
        <td>团队提成百分比设置</td>
        <td><input type="text" id="percentageInput" /></td>
        <td><button type="button" class="btn btn-primary" id="savePercentage">保存</button></td>
      </tr>
      <tr>
        <td>团队总人数限制</td>
        <td>
          <input type="text" id="totalPeopleInput" /><br />
          <span class="sp1">超出限制，注册页不显示推荐</span>
        </td>
        <td><button type="button" class="btn btn-primary" id="saveTotalPeople">保存</button></td>
      </tr>
      <tr>
        <td>等级佣金设置</td>
        <td>
          <input type="text" id="commission1Input" /><br />
          <span class="sp1">A-C,C升B打给A的佣金金额</span>
        </td>
        <td><button type="button" class="btn btn-primary" id="saveCommission1">保存</button></td>
      </tr>
      <tr>
        <td>等级佣金设置</td>
        <td>
          <input type="text" id="commission2Input" /><br />
          <span class="sp1">A-B-C,C升级成为B`,B没升级,A给B的佣金金额</span>
        </td>
        <td><button type="button" class="btn btn-primary" id="saveCommission2">保存</button></td>
      </tr>
    </table>
  </div>
  <script>
    let onclick = false;
    $('#searchBtn').click(function () {
      let inputName = $('#nameInput').val();
      $('#nameInput').val('')
      console.log(tiChenList);
      $("#showplace").html('');
      for (let i = 0; i < tiChenList.length; i++) {
        if (inputName == tiChenList[i].hyName) {
          $("#showplace").append(`
                    <ul>
                      <li>会员等级:<span id="sp1" class='changeData'>${tiChenList[i].hyName}</span></li>
                      <li>团队提成百分比:<span id="sp2" class='changeData'>${tiChenList[i].percentage}</span></li>
                      <li>团队总人数:<span id="sp3" class='changeData'>${tiChenList[i].totalPeople}</span></li>
                      <li>A-C等级佣金设置:<span id="sp4" class='changeData'>${tiChenList[i].commission1}</span></li>
                      <li>A-B-C等级佣金设置:<span id="sp5" class='changeData'>${tiChenList[i].commission2}</span></li>
                    </ul>
            `);
          return;
        }
      }
      onclick = true;
    })
    $('#savePercentage').click(function () {
      let percentageInput = $('#percentageInput').val();
      if (onclick = true) {
        $('#sp2').html('');
        $('#sp2').append(`${percentageInput}`);
      }
    })
    $('#saveTotalPeople').click(function () {
      let totalPeopleInput = $('#totalPeopleInput').val();
      if (onclick = true) {
        $('#sp3').html('');
        $('#sp3').append(`${totalPeopleInput}`);
      }
    })
    $('#saveCommission1').click(function () {
      let commission1Input = $('#commission1Input').val();
      if (onclick = true) {
        $('#sp4').html('');
        $('#sp4').append(`${commission1Input}`);
      }
    })
    $('#saveCommission2').click(function () {
      let commission2Input = $('#commission2Input').val();
      if (onclick = true) {
        $('#sp5').html('');
        $('#sp5').append(`${commission2Input}`);
      }
    })
  </script>
</body>

</html>